<template>
  <div class="deal-card" @click="goToDetail">
    <div class="deal-image">
      <img :src="deal.image" :alt="deal.image">
      <div class="deal-tag">{{ $t('秒杀') }}</div>
<!--      <div class="deal-progress">-->
<!--        <div class="progress-bar" :style="{ width: `${deal.progress}%` }"></div>-->
<!--        <span class="progress-text">已抢{{ deal.progress }}%</span>-->
<!--      </div>-->
    </div>
    <div class="deal-content">
      <h3 class="deal-title">{{ deal.name }}</h3>
      <div class="deal-price">
        <div class="price-row">
          <span class="current-price">{{ langStore.languageSymbol }}{{ deal.price*langStore.languageRate }}</span>
          <!-- <span class="original-price">{{langStore.languageSymbol }}{{ deal.price*langStore.languageRate }}</span> -->
<!--          <span class="discount-tag">{{ deal.discount }}折</span>-->
        </div>
        <!-- <div class="countdown" v-if="deal.timeIds">
          <i class="fas fa-clock"></i>
          <span>{{ formatTimeLeft(deal.createTime) }}</span>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import useLangStore from '@/store/modules/lang'
const langStore = useLangStore()

const router = useRouter()
const props = defineProps({
  deal: {
    type: Object,
    required: true
  }
})

const formatTimeLeft = (endTime) => {
  const end = new Date(endTime).getTime()
  const now = new Date().getTime()
  const diff = end - now

  if (diff <= 0) return '已结束'

  const hours = Math.floor(diff / (1000 * 60 * 60))
  const minutes = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))
  return `${hours}时${minutes}分`
}

const goToDetail = () => {
  router.push(`/deals/${props.deal.id}`)
}
</script>

<style lang="scss" scoped>
.deal-card {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  transition: transform 0.2s;

  &:hover {
    transform: translateY(-2px);
  }

  .deal-image {
    position: relative;
    padding-top: 100%;

    img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .deal-tag {
      position: absolute;
      top: 10px;
      right: 10px;
      background: #d91818;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-weight: bold;
      font-size: 14px;
    }

    .deal-progress {
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 24px;
      background: rgba(0, 0, 0, 0.6);
      display: flex;
      align-items: center;
      padding: 0 10px;

      .progress-bar {
        position: absolute;
        left: 0;
        top: 0;
        height: 100%;
        background: #d91818;
        transition: width 0.3s;
      }

      .progress-text {
        color: white;
        font-size: 12px;
        position: relative;
        z-index: 1;
      }
    }
  }

  .deal-content {
    padding: 15px;

    .deal-title {
      font-size: 14px;
      margin-bottom: 10px;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      line-clamp: 2;
      overflow: hidden;
    }

    .deal-price {
      .price-row {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 8px;

        .current-price {
          font-size: 20px;
          font-weight: bold;
          color: #d91818;
        }

        .original-price {
          color: #999;
          text-decoration: line-through;
          font-size: 14px;
        }

        .discount-tag {
          background: #fff1f1;
          color: #d91818;
          padding: 2px 6px;
          border-radius: 2px;
          font-size: 12px;
        }
      }

      .countdown {
        display: flex;
        align-items: center;
        gap: 6px;
        color: #666;
        font-size: 12px;

        i {
          color: #999;
        }
      }
    }
  }
}
</style>
